<template>
	<div>
		<div>
			<el-row :gutter="20">
				<el-col :span="8">
					{{paymethod}}:
				</el-col>
				<el-col :span="16">
					<el-input @input="inputCheck"  v-model="totalNum" ></el-input>
				</el-col>
			</el-row>

		</div>
		<br>
		<el-row :gutter="0">
			<el-col :span="8" v-for="items in arr" :key="items">
				<a style="cursor: pointer;text-decoration: none;" @click="getNumber(items)">
					<div class="seatNum" style="width: 100%;height: 50px;background-color:#ADD8E6;padding-top: 15px;border:1px solid white;font-weight: 600;">
						<span style="font-size: 2.25rem">{{ items }}</span>
					</div>
				</a>
			</el-col>
			<el-col :span="8">
				<a style="cursor: pointer;text-decoration: none;" @click="clearNum">
					<div class="seatNum" style="width: 100%;height: 50px;background-color:lightgreen;padding-top: 15px;border:1px solid white;font-weight: 600;">
						<span style="font-size: 1.75rem">C</span>
					</div>
				</a>
			</el-col>
			<el-col :span="24">
				<a style="cursor: pointer;text-decoration: none;" @click="getInputNumber">
					<div class="seatNum" style="width: 100%;height: 70px;background-color:goldenrod;padding-top: 22px;border:1px solid white;font-weight: 400;">
						<span style="font-size: 1.75rem">确认&nbsp;&nbsp;/&nbsp;&nbsp;结账</span>
					</div>
				</a>
			</el-col>
		</el-row>
	</div>
</template>

<script>
export default {
	data() {
		return {
			arr:[1,2,3,4,5,6,7,8,9,0,'.'],
			keyBoardVisible: false,
			numArray:[],
			totalNum:'',
			panNum:'',
			title:'',
			money:'',
			paymethod:'',
			bakMoney:''
		};
	},

	created() {},

	methods: {
		init(money,paymethod){
			this.bakMoney = money
			this.totalNum = money
			this.paymethod = paymethod
		},

		inputCheck(){
			if(isNaN(this.totalNum)){
				this.totalNum = ''
			}
		},

		//确认
		getInputNumber(){
			if(this.totalNum === ''){
				this.$message({
					message: '请输入金额',
					type: 'warning',
					duration: 1500
				});
			}else{
				var payInfo = {
					bakMoney:this.bakMoney,
					payname:this.paymethod,
					paymoney:Number(this.totalNum)
				}
				this.$emit("getPayNum",payInfo)
			}

		},

		getNumber(num){
			this.panNum += num.toString()
			// if(num === 0 && this.panNum.length === 1){
			// 	this.totalNum = ''
			// 	this.panNum = ''
			// }
			 if(num === '.' &&  this.panNum.length === 1){
				this.totalNum = ''
				this.panNum = ''
			}
			else{
				this.totalNum += num.toString()
				// var payInfo = {
				// 	payname:this.paymethod,
				// 	paymoney:Number(this.totalNum)
				// }
				// this.$emit("getPayNum",payInfo)
			}
		},
		//清除数据
		clearNum(){
			this.totalNum = ''
			this.panNum = ''
			this.$emit("getEatNum",this.totalNum)
		},
	},


};
</script>

<style>
#app {
	width: 100%;
	padding: 0px 0px 0px;
	border-radius: 4px;
	margin: 0px auto;
	background: #ffffff;
	box-sizing: border-box;

}

#input-box {
	display: block;
	width: 100%;
	height: 46px;
	margin-bottom: 15px;
	border: none;
	border-radius: 6px;
	background:#ADD8E6;
	padding: 0 5px;
	text-align: right;
	font-size: 20px;
	color: #ffffff;
	font-weight: bold;
	letter-spacing: 1px;
}

#calc-box {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;

}
#calc-box .btn {
	font-size: 40px;
	width: 30%;
	height: 40%;
	text-align: center;
	line-height: 40px;
	border-radius: 6px;
	cursor: pointer;
	background: 	#B0E0E6;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 12px;
	box-shadow: 0 2px rgba(0, 0, 0, 0.2);
}

#app .btn-double {
	width: 115px;
	background: #ffc690;
	box-shadow: 0 4px #ab7c50;
}

#app .clear {
	background: #ff94e6;
	box-shadow: 0 4px #d631af;
	color: #fff;
}

#app .operator {
	background: #FFB6C1;
	color: white;
}

#app .operator1 {
	background: #428ec8;
	color: white;
}

#app .back {
	background: #f1ff98;
	box-shadow: 0 4px #9da858;
}

#btnqueren{
	font-size: 20px;
	width: 100%;
	height: 40%;
	text-align: center;
	line-height: 40px;
	border-radius: 6px;
	cursor: pointer;
	background: #04B404;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 12px;
	box-shadow: 0 2px rgba(0, 0, 0, 0.2);
}

</style>
